<template>
  <div id="app">
    <header>
      <span v-show="!isShow" @click="goback" class="goBack">
         返回
      </span>
      黑马商城
    </header>
    <!-- content内容区域 -->
    <transition mode="out-in">
      <router-view></router-view>
    </transition>
    <!-- tabbar -->
    <van-tabbar v-show="isShow" v-model="active" route>
      <van-tabbar-item to="/home">
        <span>首页</span>
        <i slot="icon" class="iconfont icon-index-fill"></i>
      </van-tabbar-item>
      <van-tabbar-item to="/member">
        <span>用户</span>
        <i slot="icon" class="iconfont icon-icon_zhanghao"></i>
      </van-tabbar-item>
      <van-tabbar-item to="/shopcar" icon="shopping-cart-o">购物车</van-tabbar-item>
      <van-tabbar-item to="/search" icon="search">标签</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 0,
      tabbarList: ["/home", "/member", "/shopcar", "/search"]
    };
  },
  methods:{
    goback(){
      this.$router.go(-1)
    }
  },
  computed: {
    isShow: function() {
      let r = this.tabbarList.findIndex(item => item == this.$route.path);
      if (r != -1) {
        return true;
      } else {
        return false;
      }
    }
  }
};
</script>

<style lang="less" scoped>
#app {
  background-color: #bababa;
  box-sizing: border-box;
  padding-top: 40px;
  overflow-x: hidden;
}
header {
  background-color: #1989fa;
  width: 100%;
  text-align: center;
  color: #fff;
  font-size: 16px;
  line-height: 40px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
}
.goBack{
  position: absolute;
  left: 15px;
}
.v-enter {
  opacity: 0;
  transform: translateX(100%);
}

.v-leave-to {
  opacity: 0;
  transform: translateX(-100%);
  position: absolute;
}

.v-enter-active,
.v-leave-active {
  transition: all 0.5s ease;
}
</style>